<template>
    <el-dialog
            class="upload-demo"
            title="上传附件"
            :visible.sync="visible"
            width="800px"
    >
        <el-upload
                :action="uploadUrl"
                :on-preview="handlePreview"
                :limit="10"
                ref="upload"
                multiple
                :file-list="files"
                :auto-upload="false"
                :on-success="uploadSuccess"
                :on-remove="handleRemove">
            <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
            <div slot="tip" class="el-upload__tip">请上传10个以内的农户附件,且单个文件大小不能超过10M,总文件大小不能超过50M</div>
        </el-upload>
        <span
                slot="footer"
                class="dialog-footer"
        >
        <el-button
                size="small"
                @click="cancel"
        >取 消</el-button>
        <el-button
                size="small"
                type="primary"
                @click="submit"
        >确 定</el-button>
      </span>
    </el-dialog>
</template>
<script>
    export default {
        data() {
            return {
                visible: false,
                labelWidth: "",
                userId: 0,
                files: [],
                uploadUrl: '',
                count:0,
                tempFiles:[]
            }
        },
        props: {
            value: {
                type: Object,
                default:
                    function () {
                        return {
                            show: false,
                            formLabelWidth: "120px",
                            user: {
                                id: 0,
                                types: []
                            }
                        };
                    }
            }
        },
        watch: {
            value: {
                deep: true,
                immediate: true,
                handler:
                    function (val) {
                        this.visible = val.show;
                        this.labelWidth = val.formLabelWidth || "120px";
                        this.userId = val.user.id;
                        if(this.visible){
                            this.loadFile();
                        }
                        this.uploadUrl = this.$config.http.prefix + "/common/upload/attachment?foreignKey=" + this.userId+"&tableType="+"FARMER_ATTACHMENT";
                    }
            },
            visible(val) {
                if (!val) this.$emit("on-show-change", this.$data);
            }
        },
        mounted() {
        },
        methods: {
            loadFile() {
                this.$api.file.files(this.userId,'FARMER_ATTACHMENT',result=>{
                    this.files = result.files.map(item=>{
                        return {name:item.originalName,src:this.$config.http.prefix+"/"+item.fileKey,key:item.id}
                    })
                })
            },
            handleRemove(val) {
                if(val&&val.key){
                    this.$api.file.delFile(val.key,()=>{
                    })
                }
            },
            handlePreview() {
            },
            cancel() {
                this.visible = false;
                this.userId = 0;
                this.files=[];
            },
            uploadSuccess(result) {
                this.$notify({
                    title: result.operationState === 'FAIL' ? '失败' : '成功',
                    message: `${result.operationState === 'FAIL' ? result.errors[0] : '上传成功'}`,
                    type: result.operationState === 'FAIL' ? 'error' : 'success'
                });
                this.count++;
                if(this.count ===  this.tempFiles.length){
                    this.cancel();
                }
            },
            submit() {
                this.count = 0;
                let files = this.$refs.upload.uploadFiles.filter(item=>item.status==='ready');
                this.tempFiles = files;
                let sumSize = 0;
                for (let i in files) {
                    let size = files[i].size / 1024 / 1024;
                    sumSize += size;
                    if (size >= 10) {
                        this.$message.error(`文件 ${files[i].name} 超过10M，请重新选择`);
                        return;
                    }
                }
                if (sumSize >= 50) {
                    this.$message.error(`文件总大小超过50M，请删除部分文件`);
                    return;
                }
                if(files.length ===0){
                    this.cancel();
                    return;
                }
                this.$refs.upload.submit();
            }
        }
    }
</script>